<template>
  <div class="lower">
    <!-- . . 上 -->
    <div class="loTop">
      <div class="distribution">
        <div class="datb">
          <h4>客户分布</h4>
        </div>
        <div class="lista" ref="lista" style=" height: 350px"></div>
      </div>
      <div class="need">
        <div class="datb">
          <h4>待办数据</h4>
        </div>
        <div class="data">
          <div class="shuju" v-for="it in dataList" :key="it.id">
            <span>{{it.title}}</span>
            <em>{{it.id}}</em>
          </div>
        </div>
      </div>
    </div>
    <!-- . . 下 -->
    <div class="loLo">
      <div>
        <div class="datb">
          <h4>供应商数据</h4>
        </div>
        <div class="listq" ref="listq" style="height: 340px"></div>
      </div>
      <div>
        <div class="datb">
          <h4>统计数据</h4>
        </div>
        <div class="listq" ref="listw" style="height: 340px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { anaCutomerApi, anaSupplierApi, anaTotalApi, todosListApi } from '../../apis/homeApi'
// echarts 引入
import echarts from 'echarts'

export default {
  data () {
    return {
      // 待办数据
      dataList: [],
      // 客户分布
      customerList: [],
      // 系统统计数据
      statisticsList: [],
      // 供应商数据
      supplierList: []
    }
  },
  created () {
    this.doList()
  },
  mounted () {
    // 客户分布节点获取
    const customer = this.$refs.lista
    const customertsObj = echarts.init(customer)
    // 获取客户分布数据
    anaCutomerApi().then(d => {
      d.data = d.data.splice(7, 20)
      const xianshi = this.zsList(d.data)
      customertsObj.setOption(xianshi)
      let resizeTime = null
      function resize () {
        if (!!resizeTime) {
          clearTimeout(resizeTime)
        }
        resizeTime = setTimeout(function () {
          customertsObj.resize()
        }, 300)
      }
      window.addEventListener('resize', resize)
    })
    // 供应商节点
    const supplier = this.$refs.listq
    const supplierObj = echarts.init(supplier)
    // 获取供应商数据
    anaSupplierApi().then(d => {
      const xianshi = this.gysList(d.data)
      supplierObj.setOption(xianshi)
      let resizeTime = null
      function resize () {
        if (!!resizeTime) {
          clearTimeout(resizeTime)
        }
        resizeTime = setTimeout(function () {
          supplierObj.resize()
        }, 300)
      }
      window.addEventListener('resize', resize)
    })
    // 系统统计节点
    const statistics = this.$refs.listw
    const statisticsObj = echarts.init(statistics)
    // 获取系统统计数据
    anaTotalApi().then(d => {
      const xianshi = this.statistics(d.data)
      statisticsObj.setOption(xianshi)
      // resize重绘
      let resizeTime = null
      function resize () {
        if (!!resizeTime) {
          clearTimeout(resizeTime)
        }
        resizeTime = setTimeout(function () {
          statisticsObj.resize()
        }, 300)
      }
      window.addEventListener('resize', resize)
    })
  },
  methods: {
    // 获取待办列表
    async doList () {
      const result = await todosListApi()
      if (result.code !== 200) {
        this.$message({
          message: '待办列表获取失败',
          type: 'warning'
        })
      }
      this.dataList = result.data
    },
    // 客户分布数据展示
    zsList (data) {
      return {
        backgroundColor: '#344b58',
        title: {
          text: '',
          x: '4%',

          textStyle: {
            color: '#fff',
            fontSize: '22'
          },
          subtextStyle: {
            color: '#90979c',
            fontSize: '16'

          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            textStyle: {
              color: '#fff'
            }

          }
        },
        grid: {
          borderWidth: 0,
          top: 110,
          bottom: 95,
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          x: '4%',
          top: '8%',
          textStyle: {
            color: '#90979c'
          },
          data: ['已付', '未付', '总销售额']
        },

        calculable: true,
        xAxis: [{
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#90979c'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitArea: {
            show: false
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              lineHeight: 16,
              padding: [2, 2, 0, 2],
              height: 50,
              fontSize: 12
            }
          },
          data: data.map(ti => ti.city)
        }],
        yAxis: [{
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#90979c'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0

          },
          splitArea: {
            show: false
          }

        }],
        dataZoom: [{
          show: true,
          height: 30,
          xAxisIndex: [
            0
          ],
          bottom: 30,
          start: 10,
          end: 80,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '110%',
          handleStyle: {
            color: '#d3dee5'

          },
          textStyle: { color: '#fff' },
          borderColor: '#90979c'

        }, {
          type: 'inside',
          show: true,
          height: 15,
          start: 1,
          end: 35
        }],
        series: [{
          name: '已付',
          type: 'bar',
          stack: '总量',
          barMaxWidth: 35,
          barGap: '10%',
          itemStyle: {
            normal: {
              color: 'rgba(255,144,128,1)',
              label: {
                show: true,
                textStyle: {
                  color: '#fff'
                },
                position: 'inside',
                formatter: function (p) {
                  return p.value > 0 ? (p.value) : ''
                }
              }
            }
          },
          data: data.map(ti => ti.salesAmount)
        },

        {
          name: '未付',
          type: 'bar',
          stack: '总量',
          itemStyle: {
            normal: {
              color: 'rgba(0,191,183,1)',
              barBorderRadius: 0,
              label: {
                show: true,
                position: 'inside',
                formatter: function (p) {
                  return p.value > 0 ? (p.value) : ''
                }
              }
            }
          },
          data: data.map(ti => ti.cancelAmount)
        }, {
          name: '总销售额',
          type: 'line',
          symbolSize: 10,
          symbol: 'circle',
          itemStyle: {
            normal: {
              color: 'rgba(252,230,48,1)',
              barBorderRadius: 0,
              label: {
                show: true,
                position: 'top',
                formatter: function (p) {
                  return p.value > 0 ? (p.value) : ''
                }
              }
            }
          },
          data: data.map(ti => ti.cancelAmount + ti.salesAmount)
        }
        ]
      }
    },
    // 供应商据展示
    gysList (data) {
      return {
        backgroundColor: '#344b58',
        title: {
          text: '',
          x: '4%',

          textStyle: {
            color: '#fff',
            fontSize: '22'
          },
          subtextStyle: {
            color: '#90979c',
            fontSize: '16'

          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            textStyle: {
              color: '#fff'
            }

          }
        },
        grid: {
          borderWidth: 0,
          top: 110,
          bottom: 95,
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          x: '4%',
          top: '8%',
          textStyle: {
            color: '#90979c'
          },
          data: ['已付', '未付', '总销售额']
        },

        calculable: true,
        xAxis: [{
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#90979c'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitArea: {
            show: false
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              lineHeight: 16,
              padding: [2, 2, 0, 2],
              height: 50,
              fontSize: 12
            }
          },
          data: data.map(ti => ti.customerName)
        }],
        yAxis: [{
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#90979c'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0

          },
          splitArea: {
            show: false
          }

        }],
        dataZoom: [{
          show: true,
          height: 30,
          xAxisIndex: [
            0
          ],
          bottom: 30,
          start: 10,
          end: 80,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '110%',
          handleStyle: {
            color: '#d3dee5'

          },
          textStyle: { color: '#fff' },
          borderColor: '#90979c'

        }, {
          type: 'inside',
          show: true,
          height: 15,
          start: 1,
          end: 35
        }],
        series: [{
          name: '已付',
          type: 'bar',
          stack: '总量',
          barMaxWidth: 35,
          barGap: '10%',
          itemStyle: {
            normal: {
              color: 'rgba(255,144,128,1)',
              label: {
                show: true,
                textStyle: {
                  color: '#fff'
                },
                position: 'inside',
                formatter: function (p) {
                  return p.value > 0 ? (p.value) : ''
                }
              }
            }
          },
          data: data.map(ti => ti.paid)
        },

        {
          name: '未付',
          type: 'bar',
          stack: '总量',
          itemStyle: {
            normal: {
              color: 'rgba(0,191,183,1)',
              barBorderRadius: 0,
              label: {
                show: true,
                position: 'inside',
                formatter: function (p) {
                  return p.value > 0 ? (p.value) : ''
                }
              }
            }
          },
          data: data.map(ti => ti.unpaid)
        }, {
          name: '总销售额',
          type: 'line',
          symbolSize: 10,
          symbol: 'circle',
          itemStyle: {
            normal: {
              color: 'rgba(252,230,48,1)',
              barBorderRadius: 0,
              label: {
                show: true,
                position: 'top',
                formatter: function (p) {
                  return p.value > 0 ? (p.value) : ''
                }
              }
            }
          },
          data: data.map(ti => ti.paid + ti.unpaid)
        }
        ]
      }
    },
    // 系统统计数据展示
    statistics (it) {
      const data = ['取消计数', '合作账户', '产品计数', '销售额']
      return {
        backgroundColor: '#344B58',
        color: [new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
          offset: 0,
          color: '#13ace8'
        }, {
          offset: 1,
          color: '#0167e8'
        }], false)],
        grid: {
          left: '8%',
          right: '10%',
          top: '12%',
          bottom: '18%',
          containLabel: true
        },
        tooltip: {
          show: 'true',
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: {
          type: 'value',

          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#ccc'
            }
          },
          axisLabel: {
            show: true,
            color: '#ccc',
            fontSize: 18
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }

        },
        xAxis: [{
          axisTick: {
            show: false
          },

          type: 'category',
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            color: '#ccc',
            interval: 0,
            formatter: function (value) {
              return value.split('').join('\n')
            }
          },

          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed'
            }
          },
          data: data
        }],
        series: [{
          name: '数量',
          type: 'bar',
          barWidth: 15,
          label: {
            normal: {
              show: false,
              position: 'right',
              textStyle: {
                color: '#ccc',
                fontSize: 14
              }
            }
          },
          itemStyle: {
            normal: {
              // barBorderRadius: [0, 0, 5, 0],
            }
          },
          data: [it.cancelCount, it.cooperateCount, it.productCount, it.salesCount]
        }]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.currency {
    width: 100%;
    height: 100%;
    // 结构左
    .left {
        width: 240px;
        height: 100%;
        background-color: #00152A;
        border-right: 1px solid #fff;
        float: left;
        .el-menu-vertical-demo {
            widows: 240px;
            border-right: #00152A 1px solid;
        }
        .tab {
            text-align: center;
            color: #fff;
        }
    }
    // 结构右
    .right {
        width: calc(100% - 240px);
        height: 100%;
        float: right;
        //  . 上
        > .top {
            width: 100%;
            height: 6%;
            background-color: #00152A;
            display: flex;
            justify-content: flex-end;
            padding: 0 30px;
            > h5 {
                color: #fff;
                margin: 14px;
            }
        }
        //  . 下
        > .lower {
            width: 100%;
            height: calc(100% - 6%);
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            .loTop {
              height: 48%;
              width: 100%;
              display: flex;
              justify-content: space-between;
              > .distribution {
                width: 60%;
                height: 100%;
                box-shadow: 0 0 5px #909399;
                > .lista {
                  width: 100%;
                  padding: 10px;
                  padding-top: 0;
                }
              }
              > .need {
                width: 39%;
                height: 100%;
                box-shadow: 0 0 5px #909399;
                > .data {
                  width: 100%;
                  height: calc(100% - 74px);
                  overflow-x: hidden;
                  > .shuju {
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    justify-content: space-between;
                    white-space: nowrap;
                    margin: 10px;
                    > em {
                      font-size: 16px;
                      color: #909399;
                      margin-right: 20px;
                    }
                    > span {
                      font-size: 16px;
                      margin: 0 20px;
                    }
                  }
                }
              }
            }
            .loLo {
              height: 48%;
              width: 100%;
              display: flex;
              justify-content: space-between;
              > div {
                width: 49%;
                height: 100%;
                box-shadow: 0 0 5px #909399;
                > .listq {
                  width: 100%;
                  padding: 10px;
                  padding-bottom: 0;
              }
              }
            }
            .datb {
              widows: 100%;
              height: 40px;
              border-bottom: 1px solid #909399;
              margin: 10px;
              h4 {
                margin: 10px;
              }
            }

        }
    }
}

</style>
